<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="[TOC] angularjs1.控制器中的$scope为什么不能改成其他的名字2.安全的方式创建控制器3.angularjs中的作用域 局部作用域 angularjs中控制器控制的区域就是一块局部作用域 $scope代表的就是局部作用域 作用域嵌套的情况下 数据是一层一层通过$scope向外部查找的 直到全局作用域 相邻控制器之间是独立的 互不影响的   全局作用域 $rootScope代表的就">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/2017/10/22/text/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="[TOC] angularjs1.控制器中的$scope为什么不能改成其他的名字2.安全的方式创建控制器3.angularjs中的作用域 局部作用域 angularjs中控制器控制的区域就是一块局部作用域 $scope代表的就是局部作用域 作用域嵌套的情况下 数据是一层一层通过$scope向外部查找的 直到全局作用域 相邻控制器之间是独立的 互不影响的   全局作用域 $rootScope代表的就">
<meta property="og:updated_time" content="2017-10-22T05:09:21.595Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
<meta name="twitter:description" content="[TOC] angularjs1.控制器中的$scope为什么不能改成其他的名字2.安全的方式创建控制器3.angularjs中的作用域 局部作用域 angularjs中控制器控制的区域就是一块局部作用域 $scope代表的就是局部作用域 作用域嵌套的情况下 数据是一层一层通过$scope向外部查找的 直到全局作用域 相邻控制器之间是独立的 互不影响的   全局作用域 $rootScope代表的就">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
  

</head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-text" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/10/22/text/" class="article-date">
  <time datetime="2017-10-22T05:07:02.119Z" itemprop="datePublished">2017-10-22</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>[TOC]</p>
<h2 id="angularjs"><a href="#angularjs" class="headerlink" title="angularjs"></a>angularjs</h2><h3 id="1-控制器中的-scope为什么不能改成其他的名字"><a href="#1-控制器中的-scope为什么不能改成其他的名字" class="headerlink" title="1.控制器中的$scope为什么不能改成其他的名字"></a>1.控制器中的$scope为什么不能改成其他的名字</h3><h3 id="2-安全的方式创建控制器"><a href="#2-安全的方式创建控制器" class="headerlink" title="2.安全的方式创建控制器"></a>2.安全的方式创建控制器</h3><h3 id="3-angularjs中的作用域"><a href="#3-angularjs中的作用域" class="headerlink" title="3.angularjs中的作用域"></a>3.angularjs中的作用域</h3><ul>
<li>局部作用域<ul>
<li>angularjs中控制器控制的区域就是一块局部作用域</li>
<li>$scope代表的就是局部作用域</li>
<li>作用域嵌套的情况下 数据是一层一层通过$scope向外部查找的 直到全局作用域</li>
<li>相邻控制器之间是独立的 互不影响的</li>
</ul>
</li>
<li>全局作用域<ul>
<li>$rootScope代表的就是全局作用域</li>
<li>挂载到全局作用域中的数据 每个控制器中都可以拿到</li>
</ul>
</li>
</ul>
<h3 id="4-angularjs常用指令"><a href="#4-angularjs常用指令" class="headerlink" title="4.angularjs常用指令"></a>4.angularjs常用指令</h3><ul>
<li>指令分类:内置指令(普通指令、事件指令) 自定义指令</li>
<li><p>普通指令</p>
<ul>
<li><p>ng-repeat 遍历数据</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h4</span>&gt;</span>遍历 一维数组<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">        <span class="comment">&lt;!--</span></div><div class="line"><span class="comment">            ng-repeat 遍历数据 类似于for in 循环</span></div><div class="line"><span class="comment">            in 是固定写法</span></div><div class="line"><span class="comment">            in 后面加上要遍历的数据</span></div><div class="line"><span class="comment">            item 是遍历的当前项(item这个词可以随意写)</span></div><div class="line"><span class="comment">            这个指令可以加在任何标签上</span></div><div class="line"><span class="comment">        --&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"item in data"</span>&gt;</span></div><div class="line">            &#123;&#123;item&#125;&#125;</div><div class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">h4</span>&gt;</span>遍历 数组中混合对象<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">ng-repeat</span>=<span class="string">"item in person"</span>&gt;</span>&#123;&#123;item.name&#125;&#125; &#123;&#123;item.age&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">h4</span>&gt;</span>遍历 对象<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment">        key代表对象的键值</span></div><div class="line"><span class="comment">        val代表对象键值对应的值</span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-repeat</span>=<span class="string">"(key,val) in obj"</span>&gt;</span></div><div class="line">        &#123;&#123;key&#125;&#125; &#123;&#123;val&#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>,[])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>,[<span class="string">'$scope'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 一维数组</span></span></div><div class="line"><span class="javascript">                $scope.data = [<span class="string">'小明'</span>,<span class="string">'小红'</span>,<span class="string">'小黑'</span>,<span class="string">'小琴'</span>];</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 数组中混合对象(最常用的形式)</span></span></div><div class="line"><span class="undefined">                $scope.person = [</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小明'</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小红'</span>,<span class="attr">age</span>:<span class="number">28</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小红'</span>,<span class="attr">age</span>:<span class="number">28</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小黑'</span>,<span class="attr">age</span>:<span class="number">38</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小琴'</span>,<span class="attr">age</span>:<span class="number">48</span>&#125;</span></div><div class="line"><span class="undefined">                ]</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 对象</span></span></div><div class="line"><span class="undefined">                $scope.obj = &#123;</span></div><div class="line"><span class="javascript">                    name:<span class="string">'小明'</span>,</span></div><div class="line"><span class="undefined">                    age:35,</span></div><div class="line"><span class="javascript">                    hobby : <span class="string">'吃饭'</span></span></div><div class="line"><span class="undefined">                &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>ng-repeat 补充</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        在遍历的过程中</span></div><div class="line"><span class="comment">            $index : 遍历过程中的索引</span></div><div class="line"><span class="comment">            $first : 布尔类型的值 当前是否是第一项 是返回true 不是返回false</span></div><div class="line"><span class="comment">            $last  : 布尔类型的值 当前是否是最后一项 是返回true 不是返回false</span></div><div class="line"><span class="comment">            $middle : 布尔类型的值 第一项和最后一项返回false 其余返回true</span></div><div class="line"><span class="comment">            $even : 偶数项返回true 否则返回false</span></div><div class="line"><span class="comment">            $odd : 奇数项返回true 否则返回false</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        我们可以利用这些值在循环的过程中做各种判断 达到我们想要的目的</span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"item in person"</span> <span class="attr">class</span>=<span class="string">"&#123;&#123;$first ? 'first' : ''&#125;&#125; &#123;&#123; $last ? 'last' : ''&#125;&#125;"</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>名字：&#123;&#123;item.name&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>年龄：&#123;&#123;item.age&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>索引：&#123;&#123;$index&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是第一项：&#123;&#123;$first&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是最后一项：&#123;&#123;$last&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是中间项：&#123;&#123;$middle&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否偶数项：&#123;&#123;$even&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否奇数项：&#123;&#123;$odd&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        默认情况下遍历的数组中不能有重复类型的值(基本数据类型) 否则会报错 信息如下</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        [ngRepeat:dupes]  ng-repeat指令被愚弄(调戏)了</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        解决: 在遍历的数据后面写上track by 一个唯一(不重复)的值  一般会写$index</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-repeat</span>=<span class="string">"item in data track by $index"</span>&gt;</span></div><div class="line">        &#123;&#123;item&#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-repeat</span>=<span class="string">"(key,val) in data track by key"</span>&gt;</span></div><div class="line">        &#123;&#123;val&#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- 通过奇偶数做隔行变色 --&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined">        .even&#123;background:pink;&#125;</span></div><div class="line"><span class="undefined">        .odd&#123;background:lightblue;&#125;</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"item in person"</span> <span class="attr">class</span>=<span class="string">"&#123;&#123;$even ? 'even' : 'odd'&#125;&#125;"</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>名字：&#123;&#123;item.name&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>年龄：&#123;&#123;item.age&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>索引：&#123;&#123;$index&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是第一项：&#123;&#123;$first&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是最后一项：&#123;&#123;$last&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否是中间项：&#123;&#123;$middle&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否偶数项：&#123;&#123;$even&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>是否奇数项：&#123;&#123;$odd&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>,[])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>,[<span class="string">'$scope'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                $scope.person = [</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小明'</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小红'</span>,<span class="attr">age</span>:<span class="number">28</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小红'</span>,<span class="attr">age</span>:<span class="number">28</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小黑'</span>,<span class="attr">age</span>:<span class="number">38</span>&#125;,</span></div><div class="line"><span class="javascript">                    &#123;<span class="attr">name</span>:<span class="string">'小琴'</span>,<span class="attr">age</span>:<span class="number">48</span>&#125;</span></div><div class="line"><span class="undefined">                ]</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 数组中存在重复的值</span></span></div><div class="line"><span class="javascript">                $scope.data = [<span class="string">'小明'</span>,<span class="string">'小红'</span>,<span class="string">'小明'</span>,<span class="string">'小红'</span>];</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>在循环的过程中如果有重复项 需要加上 track by $index</p>
</li>
<li><p>ng-class指令 用来操作类名</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined">        button &#123;</span></div><div class="line"><span class="undefined">            width: 120px;</span></div><div class="line"><span class="undefined">            height: 40px;</span></div><div class="line"><span class="undefined">            border: none;</span></div><div class="line"><span class="undefined">            outline: none;</span></div><div class="line"><span class="undefined">            color: #FFF;</span></div><div class="line"><span class="undefined">            font-size: 16px;</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">        .red &#123;</span></div><div class="line"><span class="undefined">            background: red;</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">        .green &#123;</span></div><div class="line"><span class="undefined">            background: green;</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment">        ng-class指令：专门用来操作类名的</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">            1.指令的值以对象的形式存在</span></div><div class="line"><span class="comment">            2.对象的属性值转化为布尔值是true时,将当前的属性名作为类名添加到class属性中</span></div><div class="line"><span class="comment">            3.对象的属性值转化为布尔值是false时,将当前的属性名从class属性中删除掉</span></div><div class="line"><span class="comment">            4.属性值可以是数据模型,也可以是JS表达式</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        注意：angular不推崇DOM操作,在当前例子中并没有直接操作类名的JS语句,</span></div><div class="line"><span class="comment">        而是通过数据模型isGreen的值是true还是false来确定添加哪个颜色的类名,</span></div><div class="line"><span class="comment">        至于如何添加到class属性中,由angular替我们完成。</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-class</span>=<span class="string">"&#123;'green':isGreen,'red':!isGreen&#125;"</span> <span class="attr">ng-click</span>=<span class="string">"setColor()"</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>, [])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>, [<span class="string">'$scope'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>) </span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// isGreen用来控制当前按钮是绿色还是非绿色</span></span></div><div class="line"><span class="javascript">                $scope.isGreen = <span class="literal">true</span>;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 用来切换按钮的颜色</span></span></div><div class="line"><span class="javascript">                $scope.setColor = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                    <span class="comment">// 让isGreen在每次点击按钮的时候跟当前值取反</span></span></div><div class="line"><span class="javascript">                    <span class="comment">// 也就是一次是true 一次是false </span></span></div><div class="line"><span class="javascript">                    <span class="comment">// 以达到切换颜色的目的</span></span></div><div class="line"><span class="undefined">                    $scope.isGreen = !$scope.isGreen;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>ng-bind ng-bind-template 数据绑定 解决表达式闪烁问题</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment">        在angular没有被加载进页面之前,浏览器会将下面的</span></div><div class="line"><span class="comment">        表达式当作普通字符串显示在页面中,angular在被加</span></div><div class="line"><span class="comment">        载进页面之后,才会将下面的表达式替换成了对应的数</span></div><div class="line"><span class="comment">        据,这样就会存在闪烁问题</span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line">    &#123;&#123;msg1&#125;&#125;</div><div class="line"></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment">        用指令ng-bind绑定数据解决这个问题</span></div><div class="line"><span class="comment">        ng-bind指定是专门用来做数据绑定的</span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-bind</span>=<span class="string">"msg1"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>,[])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>,[<span class="string">'$scope'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                $scope.msg1 = <span class="string">'指令ng-bind解决表达式闪烁问题'</span>;</span></div><div class="line"><span class="javascript">                $scope.msg2 = <span class="string">'指令ng-cloak解决表达式闪烁问题'</span>;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>ng-non-bindable 不解析</p>
</li>
<li><p>ng-show、ng-hide 通过样式的方式控制元素显示隐藏</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        ng-show ：控制元素显示隐藏(通样式的方式)</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">            当值为true时 元素显示</span></div><div class="line"><span class="comment">            当值为false时 元素隐藏</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        ng-hide ：控制元素显示隐藏(通样式的方式)</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">            当值为true时 元素隐藏</span></div><div class="line"><span class="comment">            当值为false时 元素显示</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>例子1 当没有数据的时候显示 '暂无数据'<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"data in list"</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;data.id&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>&#123;&#123;data.title&#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">                &#123;&#123;data.description&#125;&#125;</div><div class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!--</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        当没有数据的时候显示 "暂无数据"</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        可以通过ng-show指令 如果存放数据的数组长度为0</span></div><div class="line"><span class="comment">        也就是没有数据 表达式返回true 当前div显示</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        如果存放数据的数组不为0 表达式返回false 当前div隐藏</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">        也可以用ng-hide="list.length" 达到相同效果(自行思考)</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-show</span>=<span class="string">"list.length == 0"</span>&gt;</span>暂无数据<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span> <span class="attr">ng-click</span>=<span class="string">"resetData()"</span>&gt;</span>清空数据<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">ng-init</span>=<span class="string">"isToggle=true"</span>&gt;</span>例子2 选项卡切换<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"isToggle=true"</span>&gt;</span>显示1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"isToggle=false"</span>&gt;</span>显示2<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-show</span>=<span class="string">"isToggle"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-show</span>=<span class="string">"!isToggle"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>,[])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>,[<span class="string">'$scope'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                $scope.list = [</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        id:<span class="string">'1'</span>,</span></div><div class="line"><span class="javascript">                        title:<span class="string">'有人在微信QQ上拉你搞投资？那都是骗子！'</span>,</span></div><div class="line"><span class="javascript">                        description : <span class="string">'喜欢炒股的朋友或许经常在微信或者QQ收到各种“业务员”的推广，有的介绍老师给你，有的介绍私募给你，有的是亲自操刀上阵，通常情况下是在操作获利之后五五分成，在操作一段时间之后，“业务员”会告诉你最近股市不好做，不好赚钱，而“我们有新的业务”，可以快速地获得利润，再给你发一些高收益的截图。'</span></span></div><div class="line"><span class="undefined">                    &#125;,</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        id:<span class="string">'2'</span>,</span></div><div class="line"><span class="javascript">                        title:<span class="string">'女子被"男友"骗150万 相处3年不知对方系闺蜜假扮'</span>,</span></div><div class="line"><span class="javascript">                        description : <span class="string">'时报讯 今年2月，杭州市滨江警方接到一起报警，报警人林芬（化名）称2014年至2017年间，自己被男友高鹏（化名）骗了共计150多万元。近日，民警抓获了该案嫌疑人，一看，这高鹏啊，不仅是个女的，还是林芬的闺蜜。'</span></span></div><div class="line"><span class="undefined">                    &#125;</span></div><div class="line"><span class="undefined">                ]</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="comment">// 删除数据方法</span></span></div><div class="line"><span class="javascript">                $scope.resetData = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                    <span class="comment">// 快速清空数组</span></span></div><div class="line"><span class="undefined">                    $scope.list.length = 0;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                    <span class="comment">// 也可以将数组重新复制为空数组</span></span></div><div class="line"><span class="javascript">                    <span class="comment">// $scope.list = [];</span></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>ng-if 控制元素显示隐藏</p>
<ul>
<li>和ng-show用法相同</li>
<li>区别是ng-if是通过DOM节点的添加和删除使得元素显示和隐藏</li>
</ul>
</li>
<li><p>ng-switch、ng-switch-when</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!--</span></div><div class="line"><span class="comment">    ng-switch ng-switch-when 是一对指令类</span></div><div class="line"><span class="comment">    似于JS中 switch case 语句</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    匹配到哪项 哪项就显示 其他项就隐藏</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">    常用于 做多个选项卡的显示和隐藏</span></div><div class="line"><span class="comment"></span></div><div class="line"><span class="comment">--&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span> <span class="attr">ng-init</span>=<span class="string">"showNum=1"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-switch</span>=<span class="string">"showNum"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"showNum=1"</span>&gt;</span>显示1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"showNum=2"</span>&gt;</span>显示2<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"showNum=3"</span>&gt;</span>显示3<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-switch-when</span>=<span class="string">"1"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-switch-when</span>=<span class="string">"2"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-switch-when</span>=<span class="string">"3"</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>事件指令</p>
<ul>
<li>ng-click</li>
<li>ng-dblclick</li>
<li>ng-blur</li>
<li>ng-focus</li>
<li>ng-change</li>
<li>…</li>
</ul>
</li>
<li>其他指令<ul>
<li>ng-src=””</li>
<li>ng-href=””</li>
</ul>
</li>
<li>注意<ul>
<li>大部分指令接收的值是不需要加插值表达式的</li>
<li>少部分指令在使用的时候需要加上插值表达式</li>
<li>遇到不需要加的着重记忆即可</li>
</ul>
</li>
</ul>
<h3 id="5-练习：在点击提交按钮后将选中项找出来"><a href="#5-练习：在点击提交按钮后将选中项找出来" class="headerlink" title="5.练习：在点击提交按钮后将选中项找出来"></a>5.练习：在点击提交按钮后将选中项找出来</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>在点击提交按钮后将选中项找出来<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">ng-repeat</span>=<span class="string">"data in balls"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">value</span>=<span class="string">"&#123;&#123;data.name&#125;&#125;"</span> <span class="attr">ng-model</span>=<span class="string">"data.isChecked"</span>/&gt;</span>&#123;&#123;data.name&#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"submitData()"</span>&gt;</span>提交<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></div><div class="line">    选中的结果：</div><div class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"data in result"</span>&gt;</span>&#123;&#123;data.name&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>,[])</span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>,[<span class="string">'$scope'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                $scope.balls = [</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        name:<span class="string">'足球'</span>,</span></div><div class="line"><span class="javascript">                        isChecked : <span class="literal">false</span></span></div><div class="line"><span class="undefined">                    &#125;,</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        name:<span class="string">'篮球'</span>,</span></div><div class="line"><span class="javascript">                        isChecked : <span class="literal">false</span></span></div><div class="line"><span class="undefined">                    &#125;,</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        name:<span class="string">'橄榄球'</span>,</span></div><div class="line"><span class="javascript">                        isChecked : <span class="literal">false</span></span></div><div class="line"><span class="undefined">                    &#125;,</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        name:<span class="string">'排球'</span>,</span></div><div class="line"><span class="javascript">                        isChecked : <span class="literal">false</span></span></div><div class="line"><span class="undefined">                    &#125;,</span></div><div class="line"><span class="undefined">                    &#123;</span></div><div class="line"><span class="javascript">                        name:<span class="string">'乒乓球'</span>,</span></div><div class="line"><span class="javascript">                        isChecked : <span class="literal">false</span></span></div><div class="line"><span class="undefined">                    &#125;</span></div><div class="line"><span class="undefined">                ];</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                $scope.result = [];</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                $scope.submitData = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                    $scope.result = [];</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;$scope.balls.length;i++)&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                        <span class="keyword">if</span>($scope.balls[i].isChecked)&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                            $scope.result.push($scope.balls[i])</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                        &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">                &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="6-angularjs中请求数据的方式"><a href="#6-angularjs中请求数据的方式" class="headerlink" title="6.angularjs中请求数据的方式"></a>6.angularjs中请求数据的方式</h3><ul>
<li>angularjs中提供了一些方法,我们可以用这些方法向后台发送请求,获取数据</li>
<li>语法：<ul>
<li>标准的请求方式(通过例子说明)<ul>
<li>$http()</li>
</ul>
</li>
<li>简化的请求方式(通过例子说明)<ul>
<li>$http.get()</li>
<li>$http.post()</li>
</ul>
</li>
</ul>
</li>
<li><a href="https://cdn.bootcss.com/angular.js/1.6.4/angular-sanitize.min.js" target="_blank" rel="external">ng-bind-html</a></li>
</ul>
<h3 id="7-Angular’s-jqLite"><a href="#7-Angular’s-jqLite" class="headerlink" title="7.Angular’s jqLite"></a>7.<a href="https://code.angularjs.org/1.6.4/docs/api/ng/function/angular.element" target="_blank" rel="external">Angular’s jqLite</a></h3><ul>
<li>需求：angularjs虽然不推崇DOM操作 但是谁也保证不了 一点DOM操作都没有</li>
<li>方案：angularjs提供了一个简化版本的jq,叫做jqLite.看文档说下面的事情<ul>
<li>提供了一些和jquery名字一样的方法</li>
<li>但都是些简化的方法 不拥有完全的功能</li>
<li>用法上大多一样 不一样的地方官方文档上会有说明</li>
</ul>
</li>
<li>语法：<ul>
<li>通过例子说明如何通过angular.element()将元素转换为jqLite对象</li>
<li>讲解如何通过jqLite对象使用官方提供的方法</li>
</ul>
</li>
</ul>
<h3 id="8-面向对象的方式创建控制器"><a href="#8-面向对象的方式创建控制器" class="headerlink" title="8.面向对象的方式创建控制器"></a>8.面向对象的方式创建控制器</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span> <span class="attr">ng-controller</span>=<span class="string">"demoCtrl as hello"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;hello.name&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"node_modules/angular/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">        angular.module(<span class="string">'myApp'</span>, [])</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">        /*</span></div><div class="line"><span class="javascript">            <span class="number">1.</span>angular内部会帮我们<span class="keyword">new</span>控制器处理函数</span></div><div class="line"><span class="javascript">            <span class="number">2.</span>demoCtrl <span class="keyword">as</span> hello 这个hello就是<span class="keyword">new</span>出来的对象</span></div><div class="line"><span class="undefined">            3.在视图中我们就可以使用hello.属性的方式取到hello对象中的值</span></div><div class="line"><span class="undefined">            4.面向对象的方式和$scope可以同时使用</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">         */</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">            .controller(<span class="string">'demoCtrl'</span>, [<span class="string">'$scope'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>) </span>&#123;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                <span class="keyword">this</span>.name = <span class="string">'我是孙悟空'</span>;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">                $scope.age = <span class="string">'我今年500岁'</span>;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">            &#125;])</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="9-知识点补充"><a href="#9-知识点补充" class="headerlink" title="9.知识点补充"></a>9.知识点补充</h3><ul>
<li>$scope.$watch</li>
<li>$scope.$apply</li>
</ul>
<h3 id="10-AngularJS-Batarang-Chrome开发调试工具"><a href="#10-AngularJS-Batarang-Chrome开发调试工具" class="headerlink" title="10.AngularJS Batarang Chrome开发调试工具"></a>10.<a href="https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk" target="_blank" rel="external">AngularJS Batarang Chrome开发调试工具</a></h3><ul>
<li>调试工具的使用<ul>
<li>必须要以服务器的方式打开页面</li>
<li>将Enable选项勾选</li>
</ul>
</li>
<li>能够实时观察到数据的</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2017/10/22/text/" data-id="cj96z1n5p0004yk52jdwyd7zv" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2017/10/25/nodelast/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          angular2
        
      </div>
    </a>
  
  
    <a href="/2017/08/26/hello-world/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">你好世界</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/10/">October 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/08/">August 2017</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2017/10/25/node2/">nodejs1</a>
          </li>
        
          <li>
            <a href="/2017/10/25/node-express/">express</a>
          </li>
        
          <li>
            <a href="/2017/10/25/node/">nodejs</a>
          </li>
        
          <li>
            <a href="/2017/10/25/nodelast/">angular2</a>
          </li>
        
          <li>
            <a href="/2017/10/22/text/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2017 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>